<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Cache" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>系统拓扑</title>
<link rel=stylesheet href="${pageContext.request.contextPath}/static/top/libs/bootstrap/css/bootstrap.css">
<link rel=stylesheet href="${pageContext.request.contextPath}/static/top/src/css/graph.editor.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/icon.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>

<script src="${pageContext.request.contextPath}/static/top/qunee-min.js"></script>
<script src="${pageContext.request.contextPath}/static/top/libs/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/top/libs/layout.border.js"></script>
<!-- endbuild -->
<!-- build:js libs/graph.editor/graph.editor.js -->
<script src="${pageContext.request.contextPath}/static/top/src/common/i18n.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/DomSupport.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/DragSupport.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/FileSupport.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/JSONSerializer.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/Exportpane.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/Toolbar.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/ToolBox.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/common/PopupMenu.js"></script>
<script src="${pageContext.request.contextPath}/static/top/src/graph.editor.js"></script>
<style>

.graph-editor__toolbar{
height: 0px !important;
overflow:hidden;
}

	.graph-editor__toolbox{
		width: 0px !important;
	}

    #editor {
        /*background: blue;*/
        width: 100% !important;
        height: 485px !important;
    }

    .arrow_box {
        position: relative;
        background: #FFFFFF;
        border: 2px solid #DDDDDD;
        box-shadow: #888 3px 3px 10px 0px;
    }

    .arrow_box:after, .arrow_box:before {
        /*right: 100%;*/
        /*top: 50%;*/
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_box:after {
        border-color: rgba(255, 255, 255, 0);
        border-right-color: #FFFFFF;
        border-width: 10px;
        margin-top: -10px;
    }

    .arrow_box:before {
        border-color: rgba(221, 221, 221, 0);
        border-right-color: #DDDDDD;
        border-width: 13px;
        margin-top: -13px;
    }
    
    .panel-body {
     padding: 0px; 
	}
</style>
</head>
<body style="margin: 1px" class="layout">

<table id="dg" title="" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" pageSize="20" pageList="[20,30,40,50,60]"
   url="${pageContext.request.contextPath}/frontProcessorInfo/list.do" fit="true" toolbar="#tb">
   <thead>
   	<tr>
   		<th field="cb" checkbox="true" align="center"></th>
   		<th field="frontProcessorId" width="80" align="center">前置机号</th>
   		<th field="siteName" width="80" align="center">部署区域</th>
   		<th field="ipAddress" width="50" align="center">IP地址</th>
   		<!-- <th field="netMask" width="50" align="center">子网掩码</th>
   		<th field="gateWay" width="50" align="center">网关</th> -->
   		<th field="bcchInfo" width="50" align="center">BCCH</th>
   		<!-- <th field="iconPositionX" width="100" align="center">图标横坐标</th>
   		<th field="iconPositionY" width="100" align="center">图标纵坐标</th> -->
   	</tr>
   </thead>
</table>
<div id="tb">
 
<div id="editor" data-options="region:'center'"></div>
<!-- <div style="overflow-x:scroll;overflow-y:scroll;width:100%;height:420px"> 
	<img id="userPic">
</div> -->
<!-- <span >上传图片</span> -->
<!-- <input id="entrustPicUpload" type="text" name="entImg" onchange="getPhoto(this)"/> -->

<script type="text/javascript">
        $(function () {
            $("#userPic").attr("src", "${pageContext.request.contextPath}/image/topology.png?v=" + Math.random());
        });
</script>
<script>
	var imgurl = "";
	function getPhoto(node) {
		var imgURL = "";
		try{
			var file = null;
			if(node.files && node.files[0]) {
				file = node.files[0];
			}
			else if(node.files && node.files.item(0)) {
				file = node.files.item(0);
			}
			try{
				imgURL = file.getAsDataURL();
			}catch(e) {
				imgURL = window.URL.createObjectURL(file);
			}
		}catch(e) {
			if(node.files && node.files[0]) {
				var reader = new FileReader();
				reader.onload = function(e) {
					imgURL = e.target.result;
				};
				reader.readAsDataURL(node.files[0]);
			}
		}
		createImg(imgURL);
		return imgURL;
	}
	function createImg(imgURL) {
		document.getElementById("userPic").src = imgURL;
		$('#userPic').viewr({
			url: 'src',
		});
	}
	function saveUser() {
		var realName=$("#realName").val();
		if(realName == null || realName == '') {
			layer.msg('用户名不能为空！', {icon : 7, time: 1000});
			return ;
		}
		var imgSrc = $("#userPic").attr("src");
		if(imgSrc == "" || imgSrc == null) {
			layer.msg('请上传图片！', {icon : 7, time : 1000});
			return ;
		}
		var formData = new FormData($("#uploadForm")[0]);
		$.ajax({
			url: "../addUser",
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
			success: function(data) {
				var obj = JSON.parse(data);
				layer.msg('保存成功', {icon : 6, time : 2000});
			},
			error: function(data) {
				layer.msg('保存失败！', {icon : 5, time : 2000});
			}
		})
	}
</script>

<script>
	
 	function graphEditor() {
		
		$.post("${pageContext.request.contextPath}/frontProcessorInfo/topInfo.do", function(result) {

			$('#editor').graphEditor({
		        
		        callback: function (editor) {
		            editor.toolbox.hideDefaultGroups();
		            console.log(result.rows);
		            init(editor.graph, result.rows);
		        }
		    });
			
		}, "json");
	}
	
	// 获取线路名称
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if ( r != null ){
		   return decodeURI(r[2]);
		} else {
		   return "GSM-R空口监测系统";
		} 
	}
	

    function init(graph, data) {
    	
    	var db = getQueryString("database");
    	
	    if (db && db.indexOf("广深港")>=0) {
	    	var routeName = "广深港";
	    } else {
	    	var routeName = "广深线";
	    }
    	
        graph.styles = {'arrow.to': false};
        
        if (routeName == '广深线') {
        	 var q1 = graph.createNode("操作系统终端\n192.169.10.19", -700, -200);
             q1.image = Q.Graphs.group;
             var q2 = graph.createNode("核心网接口监测采集信令\n集解码主服务器E20\n10.237.97.232\n10.238.249.132", -450, -200);
             q2.image = Q.Graphs.server;
             var q3 = graph.createNode("广深线空口应用存储服务器E19\nEth1:10.238.251.210\nEth2:10.238.249.156", -280, -200);
             q3.image = Q.Graphs.server;
            
             var q31 = graph.createNode("广深线空口采集解码服务器E19\nEth1:10.238.251.212\nEth2:10.238.249.159", -100, -200);
             q31.image = Q.Graphs.server;

             var q4 = graph.createNode("思科3560交换机\n6-1机柜\n10.238.249.154", -700, -90);
             q4.image = Q.Graphs.exchanger;
             var q5 = graph.createNode("核心网接口监测\n华为交换机\nS5700-2(E21)", -570, -90);
             q5.image = Q.Graphs.exchanger;
             var q6 = graph.createNode("核心网接口监测\n华为交换机\nS5700-2(E20)", -450, -90);
             q6.image = Q.Graphs.exchanger;
             var q7 = graph.createNode("H3C(E19)\n广深线交换机\n10.238.249.189", -290, -90);
             q7.image = Q.Graphs.exchanger;
             
             var q71 = graph.createNode("H3C(E19)\n广深港交换机\n10.238.249.190", -100, -90);
             q71.image = Q.Graphs.exchanger;
             
             var q8 = graph.createNode("深茂交换机\nD10", -0, -90);
             q8.image = Q.Graphs.exchanger;
             
             graph.createEdge("", q1, q4);
             
             graph.createEdge("", q5, q4);
             graph.createEdge("", q6, q4);
             
             graph.createEdge("", q5, q6);
             graph.createEdge("", q6, q5);
             
             graph.createEdge("", q6, q2);
             graph.createEdge("", q3, q7);
             graph.createEdge("", q3, q71);
             
             graph.createEdge("", q31, q7);
             graph.createEdge("", q31, q71);

             graph.createEdge("", q6, q71);

             graph.createEdge("", q6, q8);
            
        } else {
        	var q1 = graph.createNode("操作系统终端\n192.169.10.19", -700, -200);
            q1.image = Q.Graphs.group;
            var q2 = graph.createNode("核心网接口监测采集信令\n集解码主服务器E20\n10.237.97.232\n10.238.249.132", -450, -200);
            q2.image = Q.Graphs.server;
            var q3 = graph.createNode("广深港服务器\nEth1:10.238.249.66\nEth2:10.238.249.155", -300, -200);
            q3.image = Q.Graphs.server;

            var q4 = graph.createNode("思科3560交换机\n6-1机柜\n10.238.249.154", -700, -100);
            q4.image = Q.Graphs.exchanger;
            var q5 = graph.createNode("华为交换机\nS5700-2(E21)", -570, -100);
            q5.image = Q.Graphs.exchanger;
            var q6 = graph.createNode("华为交换机\nS5700-2(E20)", -450, -100);
            q6.image = Q.Graphs.exchanger;
            var q7 = graph.createNode("H3C(E19)\n广深港交换机", -300, -50);
            q7.image = Q.Graphs.exchanger;
            var q8 = graph.createNode("深茂交换机\nD10", -200, -100);
            q8.image = Q.Graphs.exchanger;
            
            
            graph.createEdge("", q1, q4);
            graph.createEdge("", q2, q6);
            graph.createEdge("", q3, q7);
            graph.createEdge("", q7, q3);
            graph.createEdge("", q4, q5);
            graph.createEdge("", q5, q6);
            graph.createEdge("", q6, q5);
            graph.createEdge("", q8, q6);
        }
        
        var col = 10;
        
        var count = Math.floor((data.length-1) / col + 1);
        
        for (var j = 0; j < count; j++) {
        	
        	var q9 = graph.createNode("传输网", -300, 20 + j * 150);
            q9.image = Q.Graphs.cloud;
            graph.createEdge("", q7, q9);
       		
       		var c = (count == j +1) ? data.length : col*(j + 1);
       		
            for (var i = col*j; i < c; i++) {

            	var info = data[i].siteName + '\n' + data[i].ipAddress;
            	
            	var q99 = graph.createNode(info, -750 + (i-col*j) * 100, 100 + j * 140);
            	graph.createEdge("", q9, q99);
            }
    	}
        
        graph.moveToCenter();

        function showDivAt(div, x, y) {
            var body = document.documentElement;
            var bounds = new Q.Rect(window.pageXOffset, window.pageYOffset, body.clientWidth - 2, body.clientHeight - 2);
            var width = div.offsetWidth;
            var height = div.offsetHeight;

            if (x + width > bounds.x + bounds.width) {
                x = bounds.x + bounds.width - width;
            }
            if (y + height > bounds.y + bounds.height) {
                y = bounds.y + bounds.height - height;
            }
            if (x < bounds.x) {
                x = bounds.x;
            }
            if (y < bounds.y) {
                y = bounds.y;
            }
            div.style.left = x + "px";
            div.style.top = y + "px";
            return [x, y];
        }

        function hideDiv(div) {
            div.style.display = 'none';
        }

        graph.detailsPane = document.getElementById('detailsPane');

        function fillDetailsPane(detailsPane, element) {
            detailsPane.innerHTML = '详细信息<br>Name: ' + element.name;
            detailsPane.style.display = '';
        }


        var arrowStyleContainer;

        function updateArrowCss(css) {
            if (!arrowStyleContainer) {
                arrowStyleContainer = document.createElement('style');
                arrowStyleContainer.type = 'text/css';
                document.body.appendChild(arrowStyleContainer);
            }
            arrowStyleContainer.innerHTML = css;
        }

        graph.addCustomInteraction({
            onclick: function (evt, graph) {
                var data = evt.getData()
                if (data) {
                    fillDetailsPane(graph.detailsPane, data);

                    var arrowSize = 16;
                    var x = evt.pageX;
                    var y = evt.pageY - graph.detailsPane.clientHeight / 2;

                    var arrowAtRight = x > window.innerWidth / 2;
                    var arrowCss = '.arrow_box:after, .arrow_box:before{\n';

                    if (arrowAtRight) {
                        x -= graph.detailsPane.clientWidth + arrowSize;
                        arrowCss += 'left: 100%;\ntransform: rotate(180deg);';
                    } else {
                        x += arrowSize;
                        arrowCss += 'right: 100%;\n';
                    }
                    var xy = showDivAt(graph.detailsPane, x, y);

                    var arrowY = evt.pageY - xy[1];
                    arrowCss += 'top: ' + arrowY + 'px;\n}';

                    updateArrowCss(arrowCss);
                }
            },
            onmousedown: function (evt, graph) {
                hideDiv(graph.detailsPane);
            },
            onmousewheel: function (evt, graph) {
                graph.maxScale = 1
                graph.minScale = 1
            }
            
        })
    }
    
    graphEditor();
</script>
<script type="text/javascript">

	function openFrontprocessorInfoAddDialog(){
		 $("#dlg").dialog("open").dialog("setTitle","添加前置机信息");
		 $("#flag").val(1);
		 $("#id").attr("readonly",false);
	}
	
	function refreshGraph() {
		$('#editor')[0].graphEditor = null;
		$('#editor').html('');
		graphEditor();
	}
	
	function saveFrontprocessorInfo(){
		$("#fm").form("submit",{
			url:"${pageContext.request.contextPath}/frontProcessorInfo/save.do",
			onSubmit:function(){
				return $(this).form("validate");
			},
			success:function(result){
				console.log(result);
				var result=eval('('+result+')');
				if(result.success){
					$.messager.alert("系统提示","保存成功！");
					$("#dlg").dialog("close");
					$("#dg").datagrid("reload");
					
					refreshGraph();
					
					resetValue();
				}else{
					$.messager.alert("系统提示","保存失败！");
					return;
				}
			}
		 });
	}
	
	function checkData(){
		var flag=$("#flag").val();
		if(flag==1){
			$.post("${pageContext.request.contextPath}/frontProcessorInfo/existFrontprocessorInfoName.do",{frontProcessorId:$("#frontProcessorId").val()},function(result){
				if(result.exist){
					 $.messager.alert("系统提示","该前置机号已存在，请更换！");
					 $("#frontProcessorId").focus();
				}else{
					saveFrontprocessorInfo();
				}
			},"json");
		}else{
			saveFrontprocessorInfo();
		}
	}
	
	function resetValue(){
		 $("#frontProcessorId").val("");
		 $("#siteName").val("");
		 $("#ipAddress").val("");
		 $("#bcchInfo").val("");
		 $("#iconPositionX").val("");
		 $("#iconPositionY").val("");
	}
	
	function closeFrontprocessorInfoDialog(){
		 $("#dlg").dialog("close");
		 resetValue();
	}
	
	function deleteFrontprocessorInfo(){
		 var selectedRows=$("#dg").datagrid("getSelections");
		 if(selectedRows.length==0){
			 $.messager.alert("系统提示","请选择要删除的数据！");
			 return;
		 }
		 var strIds=[];
		 for(var i=0;i<selectedRows.length;i++){
			 strIds.push(selectedRows[i].id);
		 }
		 var ids=strIds.join(",");
		 $.messager.confirm("系统提示","您确定要删除这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){
			if(r){
				$.post("${pageContext.request.contextPath}/frontProcessorInfo/delete.do",{ids:ids},function(result){
					if(result.success){
						 $.messager.alert("系统提示","数据已成功删除！");
						 $("#dg").datagrid("reload");
						 
						 refreshGraph();
						 
					}else{
						$.messager.alert("系统提示","数据删除失败，请联系系统管理员！");
					}
				},"json");
			} 
		 });
	}
	
	function searchFrontProcessorInfo(){
		
		var routeName = $("#routeName").combobox("getText").replace("请选择铁路线路...","");
		
		refreshGraph();
	}
	
</script>

 
 	<div style="height: 50%">
 	
 		<!--  
 		&nbsp;&nbsp;铁路线路：
 		
 		<input class="easyui-combobox" size="15" id="routeName" name="routeName" data-options="panelHeight:'auto',valueField:'routeName',textField:'routeName',
 		url:'${pageContext.request.contextPath}/frontProcessorInfo/routeNameComboList.do'" value="请选择铁路线路..." onkeydown="if(event.keyCode==13) searchFrontProcessorInfo()"/>
 		 
 		<input class="easyui-combobox" size="15" id="routeName" name="routeName" data-options="panelHeight:'auto',valueField:'text',textField:'value',
 		data:[{
					                text:'0',
					                value:'广深港（广深段）'
					            },
					            {
					                text:'1',
					                value:'广深线'
					            }]" value="0" onkeydown="if(event.keyCode==13) searchFrontProcessorInfo()"/> 
 		
 		
 		<a href="javascript:searchFrontProcessorInfo()" class="easyui-linkbutton" iconCls="icon-search" plain="true"><b style="font-size:15px">搜索</b></a>-->
 		
 		<c:if test="${currentMemberShip.group.name=='管理员' }">
 		<a href="javascript:openFrontprocessorInfoAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加前置机</a>
 		<a href="javascript:deleteFrontprocessorInfo()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除前置机</a>
 		</c:if>
 		
 	</div>
 	
 	<%-- <div region="north" style="height: 50%">
	<table style="padding: 5px" width="100%">
		<tr>
			<td width="90%">
				<img alt="logo" id="line" name="line" width="1050" height="250" src="${pageContext.request.contextPath}/static/images/GuangShenGang.png">
			</td>
		</tr>
	</table>
	</div> --%>
 </div>
 
 <div id="dlg" class="easyui-dialog" style="width:620px;height:200px;padding: 10px 20px" closed="true" buttons="#dlg-buttons">  
   <form id="fm" method="post">
   	<table cellspacing="8px">
   		<tr>
   			<td>选择前置机：</td>
   			<td><input type="text" id="frontProcessorInfo" name="frontProcessorInfo" class="easyui-validatebox" required="true"/></td>
   			<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
   			<td>前置机号：</td>
   			<td><input type="text" id="frontProcessorId" name="frontProcessorId" class="easyui-validatebox" required="true"/></td>
   		</tr>

   		<tr>
   			<td>部署区域：</td>
   			<td><input type="text" id="siteName" name="siteName" class="easyui-validatebox" required="true"/></td>
   			<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
   			<td>IP地址：</td>
   			<td><input type="text" id="ipAddress" name="ipAddress" class="easyui-validatebox" required="true"/></td>
   		</tr>
   		<!-- <tr>
   			<td>子网掩码：</td>
   			<td><input type="text" id="netMask" name="netMask" class="easyui-validatebox" required="true" value="255.255.255.0"/></td>
   			<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
   			<td>网关：</td>
   			<td><input type="text" id="gateWay" name="gateWay" class="easyui-validatebox" required="true" value="192.168.44.1"/></td>
   		</tr> -->
   		<!-- <tr>
   			<td>图标横坐标：</td>
   			<td><input type="text" id="iconPositionX" name="iconPositionX" class="easyui-validatebox" required="true"/></td>
   			<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
   			<td>图标纵坐标：</td>
   			<td><input type="text" id="iconPositionY" name="iconPositionY" class="easyui-validatebox" required="true"/></td>
   		</tr> -->
   		<tr>
   		    <td>BCCH：</td>
   			<td colspan="4">
   				<input type="text" style="width: 200px" id="bcchInfo" name="bcchInfo" class="easyui-validatebox" required="true"/>
   				<input type="hidden" id="flag" name="flag"/>
   			</td>
   		</tr>
   	</table>
   </form>
 </div>
 
 <div id="dlg-buttons" style="text-align:center">
 	<a href="javascript:checkData()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
 	<a href="javascript:closeFrontprocessorInfoDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
 </div>

</body>
</html>